﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ekspansi Query</title>
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="../../Scripts/iphone-style/style.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/iphone-style/jquery/iphone-style-checkboxes.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tools.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var PREVIEW_DATA = "";
        $(document).ready(function () {
            // $('#enable_ekspansi').iphoneStyle();
            $("#vspci").click(function () {
                $("#vspb").slideUp();

            });

           

        });
        /*
        $(document).mousemove(function (e) {
            //alert(e.pageX);
            $("#vspb").css("left", e.pageX+40 + "px");
            $("#vspb").css("top", e.pageY-210 + "px");
        }); 
        */
        function DisplayAsXml() {
            //$("#vsic").animate({ width: 'toggle' });
            if($("#as_xml_view").attr("checked"))
                    $("#vsic").text(PREVIEW_DATA);
                else
                    $("#vsic").html(PREVIEW_DATA);

        }
        function activateTooltip(){
            $(".buttonQuickPreview").mouseover(function (e) {
                // alert('laras');
                $("#vspb").css("left", e.pageX + 40 + "px");
                $("#vspb").css("top", e.pageY - 210 + "px");
                $("#vspb").slideDown();
                //$("#vsic").html($(this).attr("doc"));
                $("#vsic").html("<img src='../../Content/Images/ajax-loader.gif' /> loading content.....");
                $("#as_xml_view").attr("checked", false)
                $.post(
                    "Search/QuickPreview",
                    {
                        docName: $(this).attr("doc"),
                        query: $("#input_query").val()
                    }
                    ,
                    function (data) {
                        $("#vsic").html(data);
                        
                        PREVIEW_DATA = data;
                    }
                );



            });
            $(".buttonQuickPreview").mouseleave(function () {
               // alert('laras');
                //$("#vspb").slideUp();

            });
        }
        function SearchDocuments() {
            //alert(query);
            var PREVIEW = $("#resultPreview");
            var query = $("#input_query").val();
            if (query != "") {
                PREVIEW.slideDown();
                PREVIEW.html("<img src='../../Content/Images/ajax-loader.gif' /> Searching.....");
                var enableEkspansi = $("#enableEkspansi").attr("checked")?"on":"off";
                $.get(
                "Search/AjaxSearch",
                {
                    userInput:query,
                    enableEkspansi: enableEkspansi
                },
                function (response) {
                    PREVIEW.html(response);
                    activateTooltip();
                }
            );
            } else {
                PREVIEW.html("No query input");
                PREVIEW.slideUp();
            }
        }
        
    </script>
    <style type="text/css">
     #botstuff,#vsic,#vspc,#vspb
     {
         font-family:Courier !important;
     }
     #vsrs, #vsrsr, #vspci, .vspib {
        background: url("../../Content/Images/nav_logo83.png") no-repeat scroll 0 0 transparent;
     }
    #vsrs {
        background-position: 0 -212px;
        left: -16px;
    }

    #vsrs, #vsrsr {
        height: 30px;
        position: absolute;
        width: 17px;
    }
    #vspb {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        display: none;
        padding: 15px;
        position: absolute;
        top: 0;
        visibility: hidden;
        z-index: 110;
    }
    #vspci {
        background-position: -71px -111px;
        border-bottom: 5px solid #FFFFFF;
        border-left: 5px solid #FFFFFF;
        cursor: pointer;
        height: 16px;
        position: absolute;
        right: 7px;
        top: 7px;
        width: 16px;
        z-index: 16;
    }
    .preview
    {
        font-size: smaller;
    }
    input {
        -moz-box-sizing: content-box;
    }
    .buttonQuickPreview
    {
        background: url("../../Content/Images/nav_logo83.png") no-repeat scroll 0 0 transparent;
        background-position: -19px -213px;
        border: 0 none;
        cursor: pointer;
        display: inline;
        height: 13px;
        margin-left: 5px;
        margin-right: 3px;
        padding-right: 0;
        vertical-align: 6px;
        width: 13px;
    }
    .buttonQuickPreview:hover,  .preview:hover
    {
        background-position: -35px -213px;
    }
    #resultPreview
    {
        background-color: #F5F5F5;
        min-height: 250px;
        border-top: 1px solid #E5E5E5;
        border-bottom: 1px solid #E5E5E5;
        overflow: auto;
        display: none;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 20px;
    }
    .button_style
    {
            background-color: #F5F5F5;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 2px 2px 2px 2px;
            color: #666666;
            cursor: pointer;
            font-size: 11px;
            font-weight: bold;
            height: 29px;
            line-height: 27px;
            margin: 11px 6px;
            min-width: 54px;
            padding: 0 8px;
            text-align: center;
            
    }
    
    #input_query:focus
    {
        border: 2px solid #4D90FE;
        border-radius: 2px 2px 2px 2px;
    }
    #input_query
    {
        height:32px;
        margin:2px;
        padding-left: 2px;
        font: 18px arial,sans-serif !important;
    }
    *
    {
        font-family: arial,sans-serif;
    }
    .line_search
    {
        margin: 5px;
        padding: 4px;
        
    }
    .line_search:hover
    {
        background-color: #EBF2FC;
        border-top: 1px solid #CDDCF9;
        border-bottom: 1px solid #CDDCF9;
    }
    </style>
</head>
<body>
    <div>
        <center>
            <div id="imageLogo">
                <img src="../../Content/Images/lca.jpg" />
            </div>
            <form method="get">
           
                    <input
                          size="57" 
                          value="" 
                          title="Ekspansi Query" 
                          name="q" 
                          id="input_query"
                          maxlength="2048" 
                          onkeyup="SearchDocuments()"
                          />
                <br />
                <span style="font-size: smaller;">
                    <input 
                        type="checkbox" 
                        id="enableEkspansi" 
                        name="enableEkspansi"  
                        style="margin: 2px;"
                        onclick="SearchDocuments()" /> Enable Ekspansi Query
                </span>
                <br />
                <input type="submit" class="button_style" value="Search"  />
            </form>
        </center>
        <div id="resultPreview" style="margin-top: 20px;">
        
        </div>

    </div>


    <!-- -->
    <div id="botstuff">    
        <div id="vspb" style="display: block; left: 295px; width: 500px; top: 361px; height: auto; visibility: visible; display: none;">
        <span id="vspci"></span>
        <span id="vsrs" style="display: inline; top: 200px;"></span>
        <!--span id="vsrsr" style="display: inline;"></!--span -->
        <div id="vspc" style="min-height: 300px;">
        <input type='checkbox' id='as_xml_view' onclick="DisplayAsXml()" />Display as XML<hr style='border-style:dotted;' />
        <div id="vsic" style="width: 100%; height: auto; padding-top: 10px;">
        <img id="vsli" alt="" src="/images/vsli1.gif" style="visibility: hidden;">
        <div id="vsm" style="visibility: hidden;">
        </div>
        </div></div>  
      </div>
</body>
</html>
